<template>
  <div >
      <el-row style="margin-left:-13px;">
        <el-tooltip  effect="light"  placement="top">
          <div slot="content" style="height:300px;width:200px;overflow:scroll;">物流轨迹：{{systemReamrk }}</div>
          <i  style="font-size:20px" class="el-icon-position"></i>
        </el-tooltip>
        <el-tooltip  effect="light" content="起运港账单" placement="top">
          <img v-if="yesbillstatus" :src="yesbillstatus" >
        </el-tooltip>
        <el-tooltip  effect="light" content="目的港账单" placement="top">
          <img v-if="portdestination0" :src="portdestination0" >
        </el-tooltip>
        <el-tooltip  effect="light"  placement="top">
          <div slot="content" style="height:300px;width:200px;overflow:scroll;">{{systemReamrk }}</div>
          <i  style="font-size:20px" class="el-icon-s-flag"></i>
        </el-tooltip>
        <el-tooltip  effect="light" content="其他" placement="top">
          <i  style="font-size:20px" class="el-icon-s-custom"></i>
        </el-tooltip>
        <el-tooltip  effect="light" content="其他" placement="top">
          <i  style="font-size:20px" class="el-icon-picture-outline-round"></i>
        </el-tooltip>
        
      </el-row>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import {m} from "@/store/yg/common/local";

import yesbillstatusPng from '@/assets/images/yesbillstatus.png'
import nobillstatusPng from '@/assets/images/nobillstatus.png'
import portdestination0Png from '@/assets/images/portdestination0.png'
import portdestination1Png from '@/assets/images/portdestination1.png'
import deliveryPng from '@/assets/images/delivery.png'
import undeliveryPng  from '@/assets/images/undelivery.png'

export default {
  props: [
  　　'row', 'data', 'more'
　],
  data() {
    return {
       //  起 - yes
      yesbillstatus: yesbillstatusPng,
      //  起 - no
      nobillstatus: nobillstatusPng,
      //  目
      portdestination0: portdestination0Png,
      //  目
      portdestination1: portdestination1Png,

      systemReamrk:'',
    };
  },
  
  methods: {
    initShow(portOfDestinationBillStatus,billStatus){
      if(null != portOfDestinationBillStatus && portOfDestinationBillStatus== 0){
          this.portdestination0 = portdestination0Png;
      }else{
          this.portdestination0 = portdestination1Png;
      }

      if(null != billStatus && billStatus == 1){
          this.yesbillstatus = yesbillstatusPng;
      }else{
          this.yesbillstatus = nobillstatusPng;
      }
    }
  },
  mounted() {
    this.systemReamrk = this.data['sysRemark'];
    const portOfDestinationBillStatus = this.data['portOfDestinationBillStatus'];
    const billStatus = this.data['billStatus'];
    this.initShow(portOfDestinationBillStatus,billStatus);
  }
};
</script>

<style>
.top {
      text-align: center;
    }
</style>
